<script setup>
import Logo from '@/assets/crx.svg'
import {ref, watch, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {getwzdata, getbase, updateCate, updateStatus, getWz, updateExport,updateMyd,updateBkj} from "../../api/wz.js";
import Action from "../../components/action.vue"

const lookwz = ref(false);
const lookwzloading = ref(false)
const lookwzdata = ref([])
const userToken = ref('')
const drawer = ref(false)
const open = ref(true)
const wids = ref(0)
const cateOpen = ref(false)
var regex = /(wid=)+(\d+)/
var string = window.location.href;
var result = regex.exec(string)
const wzData = ref();
const wzDataStatus = ref(0)
var wid = result[2]
wids.value = wid
const getwzdatapost = () => {
  var regex = /(wid=)+(\d+)/
  var string = window.location.href;
  var result = regex.exec(string)
  var wid = result[2]
  getwzdata({wid: wid}).then(r => {
    lookwzloading.value = false
    if (r.data.code == 200) {
      lookwzdata.value = r.data.message
      console.log(lookwzdata.value)
    }
  }).catch(e => {
    lookwzloading.value = false
  })
}
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'lookwz') {
    lookwz.value = true
    lookwzloading.value = true
    getwzdatapost();
  }
})
getWz({wid: wids.value}).then(r => {
  wzData.value = r.data.data
  wzDataStatus.value = 1;
})
const toggle = () => {
  open.value = !open.value
}
const getUser = async () => {
  await chrome.storage.local.get(['wzData']).then(res => {
    const d = res.wzData;
    if (d?.userToken) {
      userToken.value = d?.userToken
    }
  })
}
const lookphone = () => {
  lookwz.value = true
  lookwzloading.value = true
  getwzdatapost();
}
const setStatus = (status) => {
  updateStatus({
    wid: wids.value,
    status: status
  }).then(r => {
    if (r.data.code == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      setTimeout(function () {
        window.location.reload()
      }, 1000)

    }
  }).catch(e => {

  })
}
getUser()


const exportFile = reactive({
  open: false,
  text: '',
})

const addexport = () => {
  updateExport({
    wid: wids.value,
    status: 1,
    text: exportFile.text
  }).then(r => {
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    setTimeout(function () {
      window.location.reload()
    }, 500)
  })
}
const setAction = (type) => {
  if (type == 'export_status') {
    updateExport({
      wid: wids.value,
      status: 0,
    }).then(r => {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      setTimeout(function () {
        window.location.reload()
      }, 500)
    })
  }else if(type == 'myd_status'){
    updateMyd({
      wid: wids.value,
    }).then(r => {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      setTimeout(function () {
        window.location.reload()
      }, 500)
    })
  }else if(type == 'bkj_status'){
    updateBkj({
      wid: wids.value,
    }).then(r => {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      setTimeout(function () {
        window.location.reload()
      }, 500)
    })
  }
}
</script>

<template>
  <el-dialog
      v-model="exportFile.open"
      title="不导出理由"
      width="500"
      align-center
  >
    <div style="padding:10px 0;">
      <el-input
          v-model="exportFile.text"
          style="width: 100%"
          :rows="4"
          type="textarea"
          placeholder="请输入不导出理由"
      />
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: left;padding:10px 0;">
        <el-button type="primary" @click="addexport">确定</el-button>
        <el-button @click="exportFile.open = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="lookwz" title="信息查看" width="450">
    <div v-loading="lookwzloading" style="width:340px;margin:0 auto;">
      <el-card style="width: 320px;margin:10px;" shadow="always">IP：{{ lookwzdata.ip }}</el-card>
      <el-card style="width: 320px;margin:10px;" shadow="always">手机：{{ lookwzdata.phone }}</el-card>
      <el-card style="width: 320px;margin:10px;" shadow="always">用户：{{ lookwzdata.u_name }}</el-card>
    </div>
  </el-dialog>
  <div v-if="userToken && wzDataStatus==1" :class="[open?'open':'close','admin_tools']">
    <div class="toggle" @click="toggle()">收起</div>
    <div style="width:1400px;margin:0 auto; height:100px;display: flex;">
      <!--      <div class="left"-->
      <!--           style="text-align: center;width:150px; display: flex;align-items: center;flex-direction: column;justify-content: center">-->
      <!--        <img src="https://wap.mala.cn/mala/imgs/114.png" class="logo" style="width:60px;height:60px">-->
      <!--        <p style="font-size:14px;color:#666;margin-top:8px;font-weight: bold">问政管理工具</p>-->
      <!--      </div>-->
      <div style="width:330px;margin-left:20px;" class="middle">
        <h3>常用工具</h3>
        <div class="tools_d">
          <el-button-group class="ml-4">
            <el-button type="primary" icon="phone" plain @click="lookphone">查看手机</el-button>
            <el-button type="primary" icon="Monitor" plain @click="lookphone">查看IP</el-button>
            <el-button type="primary" icon="CollectionTag" plain>操作记录</el-button>
          </el-button-group>
          <el-button-group class="ml-4" style="margin-top:8px;">
            <el-button type="success" icon="Star" plain>加入侧收藏</el-button>
            <el-button type="success" icon="Share" plain>生成分享</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="right" style="margin-left:20px;">
        <h3>管理工具</h3>
        <div class="tools_d">
          <div>

            <Action type="cate" :wid="wids"></Action>
            <el-popconfirm
                class="box-item"
                title="是否确定转“已办结”"
                placement="top-start"
                width="200"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setStatus(3)"
            >
              <template #reference>
                <el-button type="primary" icon="Expand">转“已办结”</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
                class="box-item"
                title="是否确定转“已受理”"
                placement="top-start"
                width="200"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setStatus(4)"
            >
              <template #reference>
                <el-button type="primary" icon="Expand">转“已受理”</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
                class="box-item"
                title="是否确定转“待处理”"
                placement="top-start"
                width="200"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setStatus(5)"
            >
              <template #reference>
                <el-button type="primary" icon="Expand">回退“处理中”</el-button>
              </template>
            </el-popconfirm>


            <el-popconfirm
                class="box-item"
                title="是否取消【标记不导出】"
                placement="top-start"
                width="300"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setAction('export_status')"
                v-if="wzData.export_status==1"
            >
              <template #reference>
                <el-button type="primary" icon="Expand" plain>取消不导出</el-button>
              </template>
            </el-popconfirm>


            <el-button type="primary" icon="Expand" v-if="wzData.export_status==0" @click="exportFile.open=true">
              标记不导出
            </el-button>


            <el-popconfirm
                class="box-item"
                :title="wzData.myd_status==1?'确认取消【不统计满意度】':'确认【不统计满意度】'"
                placement="top-start"
                width="300"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setAction('myd_status')"
            >
              <template #reference>
                <el-button type="primary" icon="Expand" :plain="wzData.myd_status?true:false">{{wzData.myd_status==1?'取消不统计满意度':'不统计满意度'}}</el-button>
              </template>
            </el-popconfirm>


            <el-popconfirm
                class="box-item"
                :title="wzData.bkj_status==1?'确认取消【仅作者和单位可见】':'确认【仅作者和单位可见】'"
                placement="top-start"
                width="300"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="setAction('bkj_status')"
            >
              <template #reference>
                <el-button type="primary" icon="Expand" :plain="wzData.bkj_status?true:false">{{wzData.bkj_status==1?'取消作者单位可见':'仅作者和单位可见'}}</el-button>
              </template>
            </el-popconfirm>

          </div>
          <div style="margin-top:10px;">
            <el-button type="warning" icon="Timer">更改超期</el-button>
            <el-button type="warning" icon="Message">快捷回复</el-button>
            <el-button type="danger" icon="Delete">进回收站</el-button>
            <el-button type="danger" icon="Delete">移除板块</el-button>
            <el-button type="danger" icon="Delete" plain>删除留言</el-button>
            <el-button type="danger" icon="Delete" plain>删除受理记录</el-button>
            <el-button type="danger" icon="Delete" plain>清空评价</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.right {
  h3 {
    font-weight: bold;
    font-size: 14px;
    color: #555;
  }

  .tools_d {
    margin: 5px 0;
  }
}

.admin_tools {
  background: #cedff7 !important;
  //border-top: 1px solid #ddd;

  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100px;
  flex: 1;
  padding: 8px 0;
  position: fixed;
  transition: .2s all;

  &.close {
    bottom: -115px;

    transition: .2s all;
  }

  .toggle {
    height: 30px;
    width: 80px;
    justify-content: center;
    display: flex;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 2px;
    align-items: center;
    background: #409eff;
    position: absolute;
    left: 10px;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    top: -30px;
  }

  .left {
    width: 200px;
  }

  .middle {
    position: relative;

    .tools_d {
      margin: 5px 0;
    }

    h3 {
      font-weight: bold;
      font-size: 14px;
      color: #555;
    }

    &::after {
      position: absolute;
      right: 0;
      top: 50%;
      background: #b9b4b4;

      height: 70%;
      transform: translateY(-50%);
      width: 1px;
      content: "";
    }

    .right {
    }
  }
}

.popup-container {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 1.25rem;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  font-family: ui-sans-serif, system-ui, sans-serif;
  user-select: none;
  line-height: 1em;
}

.popup-content {
  background-color: white;
  color: #1f2937;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
  0 2px 4px -2px rgb(0 0 0 / 0.1);
  width: max-content;
  height: min-content;
  padding: 0.5rem 1rem;
  margin: auto 0.5rem 0 0;
  transition: opacity 300ms;
}

.toggle-button {
  display: flex;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
  0 1px 2px -1px rgb(0 0 0 / 0.1);
  cursor: pointer;
  border: none;
  background-color: #288cd7;
}

.toggle-button:hover {
  background-color: #1e6aa3;
}

.button-icon {
  padding: 4px;
}
</style>
